<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="项目模板维护-审批详情" data-page-identification="t_0qmx2r0fpk">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_a66h2jgxek 容器_ak0v3kpvfq -->
      <al-box class="vid_a66h2jgxek">
        <!-- begin vid_qda7xszz78 容器_pa5tx52lro -->
        <al-box class="vid_qda7xszz78">
          <!-- begin vid_sfilmvv65x 审批详情 -->
          <span class="vid_sfilmvv65x"> 审批详情 </span>
          <!-- end vid_sfilmvv65x 审批详情 -->
        </al-box>
        <!-- end vid_qda7xszz78 容器_pa5tx52lro -->
        <!-- begin vid_sdigc5dmak 布局容器_egydrzc47r -->
        <a-row class="vid_sdigc5dmak" :slots="'3:21:3:5:3:5:3:5:3:5:3:13'">
          <a-col :span="3">
            <!-- begin vid_0jjjn9opn0 容器_xxsm8xw85u -->
            <al-box class="vid_0jjjn9opn0">
              <!-- begin vid_hte17hl8ou 简单文本_zds168dp53 -->
              <span class="vid_hte17hl8ou"> 审批类型 </span>
              <!-- end vid_hte17hl8ou 简单文本_zds168dp53 -->
            </al-box>
            <!-- end vid_0jjjn9opn0 容器_xxsm8xw85u -->
          </a-col>
          <a-col :span="21">
            <!-- begin vid_lo5a0q3ej2 容器_tdskiw8d4d -->
            <al-box class="vid_lo5a0q3ej2">
              <!-- begin vid_8ce19j1ydg 新建模板 -->
              <span class="vid_8ce19j1ydg">
                {{ renderStringInTemplate(vid_8ce19j1ydg_props.rt_text) }}
              </span>
              <!-- end vid_8ce19j1ydg 新建模板 -->
            </al-box>
            <!-- end vid_lo5a0q3ej2 容器_tdskiw8d4d -->
          </a-col>
          <a-col :span="3">
            <!-- begin vid_zf84t1z0ou 容器_m5im0xoasu -->
            <al-box class="vid_zf84t1z0ou">
              <!-- begin vid_agftkz8uz8 模板名称 -->
              <span class="vid_agftkz8uz8"> 模板名称 </span>
              <!-- end vid_agftkz8uz8 模板名称 -->
            </al-box>
            <!-- end vid_zf84t1z0ou 容器_m5im0xoasu -->
          </a-col>
          <a-col :span="5">
            <!-- begin vid_tv8o9xz8w7 容器_skzh8d3rxo -->
            <al-box class="vid_tv8o9xz8w7">
              <!-- begin vid_8o2vce0kw8 这里是项目名称 -->
              <span class="vid_8o2vce0kw8">
                {{ renderStringInTemplate(vid_8o2vce0kw8_props.rt_text) }}
              </span>
              <!-- end vid_8o2vce0kw8 这里是项目名称 -->
            </al-box>
            <!-- end vid_tv8o9xz8w7 容器_skzh8d3rxo -->
          </a-col>
          <a-col :span="3">
            <!-- begin vid_1js5v2r9t0 容器_ih3nvhpgc5 -->
            <al-box class="vid_1js5v2r9t0">
              <!-- begin vid_jysgpgn70j 模板编码 -->
              <span class="vid_jysgpgn70j"> 模板编码 </span>
              <!-- end vid_jysgpgn70j 模板编码 -->
            </al-box>
            <!-- end vid_1js5v2r9t0 容器_ih3nvhpgc5 -->
          </a-col>
          <a-col :span="5">
            <!-- begin vid_cjcrgsebb6 容器_b04l5bp23f -->
            <al-box class="vid_cjcrgsebb6">
              <!-- begin vid_io6lji4vq4 这里是项目阶段 -->
              <span class="vid_io6lji4vq4">
                {{ renderStringInTemplate(vid_io6lji4vq4_props.rt_text) }}
              </span>
              <!-- end vid_io6lji4vq4 这里是项目阶段 -->
            </al-box>
            <!-- end vid_cjcrgsebb6 容器_b04l5bp23f -->
          </a-col>
          <a-col :span="3">
            <!-- begin vid_e2okkmgl3t 容器_39jnq69sni -->
            <al-box class="vid_e2okkmgl3t">
              <!-- begin vid_1v0502ako2 关联项目数 -->
              <span class="vid_1v0502ako2"> 关联项目数 </span>
              <!-- end vid_1v0502ako2 关联项目数 -->
            </al-box>
            <!-- end vid_e2okkmgl3t 容器_39jnq69sni -->
          </a-col>
          <a-col :span="5">
            <!-- begin vid_uh026olt73 容器_9waigd2pyu -->
            <al-box class="vid_uh026olt73">
              <!-- begin vid_b6yjigkl3q 这里是任务名称 -->
              <span class="vid_b6yjigkl3q">
                {{ renderStringInTemplate(vid_b6yjigkl3q_props.rt_text) }}
              </span>
              <!-- end vid_b6yjigkl3q 这里是任务名称 -->
            </al-box>
            <!-- end vid_uh026olt73 容器_9waigd2pyu -->
          </a-col>
          <a-col :span="3">
            <!-- begin vid_0cbieojnyv 容器_y78o9c24bi -->
            <al-box class="vid_0cbieojnyv">
              <!-- begin vid_w1evp6ephc 提交人 -->
              <span class="vid_w1evp6ephc"> 提交人 </span>
              <!-- end vid_w1evp6ephc 提交人 -->
            </al-box>
            <!-- end vid_0cbieojnyv 容器_y78o9c24bi -->
          </a-col>
          <a-col :span="5">
            <!-- begin vid_sc7a8r4209 容器_dgavcrws3b -->
            <al-box class="vid_sc7a8r4209">
              <!-- begin vid_qp4k4d9gl3 未启动 -->
              <span class="vid_qp4k4d9gl3">
                {{ renderStringInTemplate(vid_qp4k4d9gl3_props.rt_text) }}
              </span>
              <!-- end vid_qp4k4d9gl3 未启动 -->
            </al-box>
            <!-- end vid_sc7a8r4209 容器_dgavcrws3b -->
          </a-col>
          <a-col :span="3">
            <!-- begin vid_1bxdl9ja36 容器_7frrcnufci -->
            <al-box class="vid_1bxdl9ja36">
              <!-- begin vid_atnq6bu02c 提交时间 -->
              <span class="vid_atnq6bu02c"> 提交时间 </span>
              <!-- end vid_atnq6bu02c 提交时间 -->
            </al-box>
            <!-- end vid_1bxdl9ja36 容器_7frrcnufci -->
          </a-col>
          <a-col :span="13">
            <!-- begin vid_fa1rlwklge 容器_yvkv8kuygk -->
            <al-box class="vid_fa1rlwklge">
              <!-- begin vid_sncshfitvt 高 -->
              <span class="vid_sncshfitvt">
                {{ renderStringInTemplate(vid_sncshfitvt_props.rt_text) }}
              </span>
              <!-- end vid_sncshfitvt 高 -->
            </al-box>
            <!-- end vid_fa1rlwklge 容器_yvkv8kuygk -->
          </a-col>
        </a-row>
        <!-- end vid_sdigc5dmak 布局容器_egydrzc47r -->
        <!-- begin vid_q31sfco6zn 容器_7untip2ec4 -->
        <al-box class="vid_q31sfco6zn">
          <!-- begin vid_vwvkrgv00s 自定义模板_920e5g4bmy -->
          <a-table
            class="vid_a7g6eyj5wh"
            :bordered="true"
            :data-source="state.templateDetailList"
            :columns="state.tableProps.columns"
            :pagination="false"
            :scroll="{ x: scrollX, y: state.templateDetailList.length ? '525px' : '' }"
            @resizeColumn="handleTaskResizeColumn"
          >
            <template #bodyCell="{ column, record, text }">
              <template v-if="column.dataIndex === 'stageName'">
                <a-tooltip placement="top" :overlayStyle="{ maxWidth: 'unset' }" color="#fff">
                  <template #title v-if="record.contentChangeMap['stageName']">
                    <p style="color:#262626;margin:0">
                      {{ record.contentChangeMap['stageSerialNumber'] + record.contentChangeMap['stageSerialNumber'] ? '.' : '' + record.contentChangeMap['stageName'] }}
                    </p>
                    <p style="color:#F5222D;margin:0">
                      {{ record.stageSerialNumber + '.' + record.stageName }}
                    </p>
                  </template>
                  <div :class="['table-text', record.contentChangeMap[column.dataIndex] ? 'red' : '']">{{ record.stageSerialNumber + '.' + record.stageName }}</div>
                </a-tooltip>
              </template>

              <template v-if="!['stageName', 'attachmentList','dependencyTemplateTaskName'].includes(column.dataIndex)">
                <a-tooltip placement="top" :overlayStyle="{ maxWidth: 'unset' }" color="#fff">
                  <template #title v-if="record.contentChangeMap[column.dataIndex]">
                    <p style="color:#262626;margin:0" v-for="(item,index) in formatStringBySemi(record.contentChangeMap[column.dataIndex])" :key="index"> {{ item }}</p>
                    <p style="color:#F5222D;margin:0" v-for="(item,index) in formatStringBySemi(text)" :key="index"> {{ item }}</p>
                  </template>
                  <template #title v-if="!record.contentChangeMap[column.dataIndex] && ['finishStandard', 'assessorStandard', 'note', 'workItem', 'description','sop'].includes(column.dataIndex)">
                    <p style="color:#262626;margin:0" v-for="(item,index) in formatStringBySemi(text)" :key="index"> {{ item }}</p>
                  </template>
                  <div :class="['table-text', record.contentChangeMap[column.dataIndex] ? 'red' : '']">{{ text }}</div>
                </a-tooltip>
              </template>
              <template v-if="column.dataIndex === 'attachmentList'">
                <div class="ellipsis download-text" type="link" v-for="(item, index) in record.contentChangeMap[column.dataIndex]" :key="index" @click="downloadFile(item)" :title="item.name"
                >{{ item.name }}
                </div>
                <div class="ellipsis download-text" style="color:#F5222D;" type="link" v-for="(item, index) in record.attachmentList" :key="index" @click="downloadFile(item)" :title="item.name"
                >{{ item.name }}
                </div>
              </template>

              <template v-if="column.dataIndex === 'dependencyTemplateTaskName'">
                <a-tooltip placement="top" :overlayStyle="{ maxWidth: 'unset' }" color="#fff">
                  <template #title v-if="record.contentChangeMap[column.dataIndex]">
                    <p style="color:#262626;margin:0"
                    >{{ record.contentChangeMap['dependencyTemplateTaskSerialNumber'] ? record.contentChangeMap['dependencyTemplateTaskSerialNumber'] + '.' : ''
                      }}{{ record.contentChangeMap[column.dataIndex] }}</p
                    >
                    <p style="color:#F5222D;margin:0">{{ record.dependencyTemplateTaskSerialNumber ? record.dependencyTemplateTaskSerialNumber + '.' : '' }}{{ text }}</p>
                  </template>
                  <template #title v-if="!record.contentChangeMap[column.dataIndex]">
                    <p style="color:#262626;margin:0">{{ record.dependencyTemplateTaskSerialNumber ? record.dependencyTemplateTaskSerialNumber + '.' : '' }}{{ text }}</p>
                  </template>
                  <div :class="['aa-text', record.contentChangeMap[column.dataIndex] ? 'red' : '']"
                  >{{ record.dependencyTemplateTaskSerialNumber ? record.dependencyTemplateTaskSerialNumber + '.' : '' }}{{ text }}</div
                  >
                </a-tooltip>
              </template>
            </template>
          </a-table>
          <!-- end vid_vwvkrgv00s 自定义模板_920e5g4bmy -->
        </al-box>
        <!-- end vid_q31sfco6zn 容器_7untip2ec4 -->
      </al-box>
      <!-- end vid_a66h2jgxek 容器_ak0v3kpvfq -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
import {
  h, ref, reactive, toRaw, markRaw, watch, computed,
  onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
} from "vue";
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
import dayjs from 'dayjs';
import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
import colorTheme from '@/design/custom-theme.json';
/*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/



  // 获取传入的流程ID和组件参数
const props = defineProps({
    'processInstanceId': {
      type: [String,Number,Boolean],
      default: undefined,
    },
  })
const immediateWatch = (source, callback) => {
  watch(source, callback, {deep: true,immediate: true })
}



/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = [];
const pageLoading = reactive({
  loading: false,
  tip: undefined
});
const authInfo = localGet('app-user-store');

const vid_io6lji4vq4_props = reactive({
  rt_text: undefined,
})

const vid_8o2vce0kw8_props = reactive({
  rt_text: undefined,
})

const vid_8ce19j1ydg_props = reactive({
  rt_text: undefined,
})

const vid_qp4k4d9gl3_props = reactive({
  rt_text: undefined,
})

const vid_b6yjigkl3q_props = reactive({
  rt_text: undefined,
})

const vid_sncshfitvt_props = reactive({
  rt_text: undefined,
})



// 处理校验
const setSubFormName =(parentInfo, name)=>{
  return [parentInfo.parents, parentInfo.cycleIndex, name];
}


/* ========================== 属性定义 ========================== */


/* -------------------------- 元素数据引用 -------------------------- */


/* ========================== 元素数据引用 ========================== */


/* -------------------------- 页面数据 -------------------------- */

// 页面数据 模版审批详情表格
const dataConnector_conn_4asfe9dzf2_response = ref();
const dataConnector_conn_4asfe9dzf2 = async (additionParams = {}) => {
  const exec = async () => {
    // 获取参数
    const params = {

    };

    // 注入附加的参数
    try {
      merge(params, additionParams);
    } catch (error) {
      console.log(error)
    }

    // 判断加载提示

    // 处理URL
    let url = '/solution-ppm/api/v2/built-in-system-ppm/project/template/{instanceId}/approval_detail';
    // 替换url中的变量
    url = url.replace('{instanceId}', String(pageParameter_state.processInstanceId))
    // 排除空参数  日期组件重置后的空参数是[null] 或者[undefined]
    Object.keys(params).forEach(key=>{ if(params[key] === null){ delete params[key] }else if( Object.prototype.toString.call(params[key]) === '[object Object]' ){ Object.keys(params[key]).forEach(childKey=>{ if(params[key][childKey] === null || (Array.isArray(params[key][childKey]) && params[key][childKey].length === 1 && isNullOrUnDef(params[key][childKey]?.[0]))){ delete params[key][childKey] }}) } });
    return get(url, params, {
      headers: undefined
    }).then(async (resp) => {
      dataConnector_conn_4asfe9dzf2_response.value = resp;

      return resp;
    }).catch(async (e) => {


      return Promise.reject(e);
    }).finally(async () => {


    })
  }

  return await exec()

}


/* ========================== 页面数据 ========================== */



/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */


/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */


/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
  'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
})

/* ========================== 页面参数 ========================== */


/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------
// 处理 这里是项目阶段 的 rt_text 属性关联
watch(() => dataConnector_conn_4asfe9dzf2_response?.value?.data?.templateCode,
  () => {
    let dataList = dataConnector_conn_4asfe9dzf2_response?.value?.data?.templateCode

    vid_io6lji4vq4_props.rt_text = dataList;
  },
  {deep: true})
// 处理 这里是项目名称 的 rt_text 属性关联
watch(() => dataConnector_conn_4asfe9dzf2_response?.value?.data?.templateName,
  () => {
    let dataList = dataConnector_conn_4asfe9dzf2_response?.value?.data?.templateName

    vid_8o2vce0kw8_props.rt_text = dataList;
  },
  {deep: true})
// 处理 新建模板 的 rt_text 属性关联
watch(() => dataConnector_conn_4asfe9dzf2_response?.value?.data?.approvalType,
  () => {
    let dataList = dataConnector_conn_4asfe9dzf2_response?.value?.data?.approvalType

    vid_8ce19j1ydg_props.rt_text = dataList;
  },
  {deep: true})
// 处理 未启动 的 rt_text 属性关联
watch(() => dataConnector_conn_4asfe9dzf2_response?.value?.data?.submitter,
  () => {
    let dataList = dataConnector_conn_4asfe9dzf2_response?.value?.data?.submitter

    vid_qp4k4d9gl3_props.rt_text = dataList;
  },
  {deep: true})
// 处理 这里是任务名称 的 rt_text 属性关联
watch(() => dataConnector_conn_4asfe9dzf2_response?.value?.data?.projectNum,
  () => {
    let dataList = dataConnector_conn_4asfe9dzf2_response?.value?.data?.projectNum

    vid_b6yjigkl3q_props.rt_text = dataList;
  },
  {deep: true})
// 处理 高 的 rt_text 属性关联
watch(() => dataConnector_conn_4asfe9dzf2_response?.value?.data?.submitTime,
  () => {
    let dataList = dataConnector_conn_4asfe9dzf2_response?.value?.data?.submitTime

    vid_sncshfitvt_props.rt_text = dataList;
  },
  {deep: true})
// ============================ 组件数据同步 ============================


/* ========================== 组件事件处理方法 ========================== */


/* -------------------------- 生命周期 -------------------------- */
// 用于参数变更后重新执行自定义指令
const queryUpdateFlag = ref(0);
onMounted(() => { ;dataConnector_conn_4asfe9dzf2()

});

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ?  clearInterval(timer): clearTimeout(timer);
  });
});

/* ========================== 生命周期 ========================== */


/* -------------------------- 数据关联处理 -------------------------- */





/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */


/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */


// ================================定制化逻辑========================================
const state = reactive({
  templateDetailList: [],
  tableProps: {
    columns: [
      {
        title: "项目阶段",
        dataIndex: "stageName",
        ellipsis: true,
        align: "left",
        width: "140px",
        fixed: "left",
        customCell: (item) => {
          const { rowIndex, rowSpan } = item;
          return {
            rowSpan: rowSpan,
            style: {
              fontSize: "16px",
              color: "#262626",
              fontWeight: "600",
              borderTop: rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "任务序号",
        dataIndex: "serialNumber",
        ellipsis: true,
        align: "center",
        width: "100px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "任务名称",
        dataIndex: "taskName",
        ellipsis: true,
        align: "center",
        width: "100px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "完成标准",
        dataIndex: "finishStandard",
        ellipsis: true,
        align: "center",
        width: "100px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "审核标准",
        dataIndex: "assessorStandard",
        ellipsis: true,
        align: "center",
        width: "100px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "注意事项",
        dataIndex: "note",
        ellipsis: true,
        align: "center",
        width: "100px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "SOP",
        dataIndex: "sop",
        ellipsis: true,
        align: "center",
        width: "100px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "甲方工作事项",
        dataIndex: "workItem",
        ellipsis: true,
        align: "center",
        width: "150px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "任务负责人（角色）",
        dataIndex: "directorRole",
        ellipsis: true,
        align: "center",
        width: "150px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "审核员（角色）",
        dataIndex: "auditorRole",
        ellipsis: true,
        align: "center",
        width: "100px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "开始时间",
        dataIndex: "periodClassifyStart",
        ellipsis: true,
        align: "center",
        width: "100px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "结束时间",
        dataIndex: "periodClassifyEnd",
        ellipsis: true,
        align: "center",
        width: "100px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "人天",
        dataIndex: "workingHours",
        ellipsis: true,
        align: "center",
        width: "80px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: '依赖任务',
        dataIndex: 'dependencyTemplateTaskName',
        ellipsis: true,
        align: 'center',
        width: '180px',
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "模板附件",
        dataIndex: "attachmentList",
        ellipsis: true,
        align: "center",
        width: "140px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "标记",
        dataIndex: "mark",
        ellipsis: true,
        align: "center",
        width: "80px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
      {
        title: "备注",
        dataIndex: "description",
        ellipsis: true,
        align: "center",
        width: "80px",
        customCell: ({ rowSpan, rowIndex, border }) => {
          return {
            style: {
              borderTop: border && rowIndex ? "1px solid #3875ff" : "none"
            }
          };
        }
      },
    ],
    formatColumnsList: ["finishStandard", "assessorStandard", "note", "workItem"]
  },
});

function handleTaskResizeColumn(w, col) {
  col.width = w;
}

const scrollX = state.tableProps.columns.reduce((pre, cur) => {
  return parseInt(pre.width) + parseInt(cur.width)
}, {})

const formatStringBySemi = (string) => {
  if (typeof string !== "string") {
    string = String(string);
  }
  return string.split(/;|；/);
};

function groupData(data) {
  let stageName = "";
  if (!data || !data.length) {
    return [];
  }
  return data.map((item, index) => {
    if (stageName !== item.stageName) {
      stageName = item.stageName;
      let rowSpan = 0;
      for (let i = 0; i < data.length; i++) {
        if (i >= index) {
          if (stageName === data[i].stageName) {
            rowSpan += 1;
          } else {
            break;
          }
        }
      }
      item.rowSpan = rowSpan;
      item.border = index;
    } else {
      item.rowSpan = 0;
    }
    item.rowIndex = index;
    return item;
  });
}

function getTableData() {
  get(`/solution-ppm/api/v2/built-in-system-ppm/project/template/${String(pageParameter_state.processInstanceId)}/approval_detail_list`).then(res => {
    state.templateDetailList = groupData(res.data);
  })
}

onMounted(() => {
  getTableData();
})

function downloadFile(info) {
  const { name, url } = info;
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function() {
    if (xhr.status === 200) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(xhr.response, name);
      } else {
        let link = document.createElement("a");
        let body = document.querySelector("body");
        link.href = window.URL.createObjectURL(xhr.response);
        link.download = name;
        // fix Firefox
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    }
  };
  xhr.send();
}
</script>
<style lang="less" scoped>
.page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color:#F5F5F5;
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container)
{
  height: 100%;
}
.page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}
.page_root :deep(.@{ant-prefix}-table)
{
  flex: auto;
  overflow: auto;
}
.table-moreBtn_down {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
  background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
  z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 15px !important;
  width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 30px !important;
  width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 45px !important;
  width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 60px !important;
  width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list)
{
  height: 100%;
  width: 50%;
}
.vid_a66h2jgxek{
  width:100%;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  display:block;
  padding-top:16px;
  padding-right:24px;
  padding-bottom:16px;
  padding-left:24px;
  background-color:#FFFFFF;
  box-shadow:0px 0px 0px 0px
}
.vid_qda7xszz78{
  margin-bottom:16px;
  background-color:#FFFFFF
}
.vid_sfilmvv65x{
  padding-left:8px;
  font-weight:800;
  font-size:18px;
  line-height:18px;
  border-left-style:solid;
  border-left-width:4px;
  border-left-color:#3875FF
}
.vid_sdigc5dmak{
  margin-bottom:16px;
  background-color:#FFFFFF
}
.vid_cjcrgsebb6{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:undefined;
  padding-left:8px;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_io6lji4vq4{
  font-weight:500
}
.vid_1js5v2r9t0{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:undefined;
  padding-right:8px;
  background-color:#FAFAFA;
  box-shadow:0px 0px 0px 0px ;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_tv8o9xz8w7{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:undefined;
  padding-left:8px;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_8o2vce0kw8{
  font-weight:500
}
.vid_zf84t1z0ou{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:undefined;
  padding-right:8px;
  background-color:#FAFAFA;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_lo5a0q3ej2{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:undefined;
  padding-left:8px;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_8ce19j1ydg{
  font-weight:500
}
.vid_0jjjn9opn0{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:undefined;
  padding-right:8px;
  background-color:#FAFAFA;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_sc7a8r4209{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:undefined;
  padding-left:8px;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_qp4k4d9gl3{
  font-weight:500
}
.vid_0cbieojnyv{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:undefined;
  padding-right:8px;
  background-color:#FAFAFA;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_uh026olt73{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:undefined;
  padding-left:8px;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_b6yjigkl3q{
  font-weight:500
}
.vid_e2okkmgl3t{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:undefined;
  padding-right:8px;
  background-color:#FAFAFA;
  box-shadow:0px 0px 0px 0px ;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_1bxdl9ja36{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:undefined;
  padding-right:8px;
  background-color:#FAFAFA;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_fa1rlwklge{
  height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:undefined;
  padding-left:8px;
  border-style:solid;
  border-width:1px;
  border-color:#D9D9D9
}
.vid_sncshfitvt{
  font-weight:500
}
.vid_q31sfco6zn{
  display:block;
  background-color:#FFFFFF;
  box-shadow:0px 0px 0px 0px
}

.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-thead) > tr {
  height: 40px;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #3875FF;
  font-size: 14px;
  font-family: arial, helvetica, "microsoft yahei";;
  font-weight: 600;
  color: #FFFFFF;
  border-bottom:1px solid #3875ff;
  padding: 8px 16px;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-thead > tr:not(:last-child) > th {
  border-bottom:1px solid #D9D9D9;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-thead > tr > th {
  border-right:1px solid #D9D9D9;
}
/* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
  border-left: none;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-thead > tr > th[colstart='0']:first-child {
  border-left:1px solid #D9D9D9;
}
/* 开启粘性表头后，表格结构会发生变化 需另外处理 */
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-header table {
  border-top:1px solid #D9D9D9;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container > .@{ant-prefix}-table-content > table {
  border-top:1px solid #D9D9D9;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-thead) > tr > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(.@{ant-prefix}-table-row-expand-icon-cell):not([colspan])::before {
  background: #D9D9D9;
  width: 1px;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-cell-scrollbar) {
  box-shadow: none;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr {
  height: 40px;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, "microsoft yahei";;
  font-weight: 400;
  color: #262626;
  border-bottom:1px solid #EBEBEB;
  padding: 0 16px;
  word-break: break-all;
  .cell-wrapper {
    padding: 0 16px;
  }
}

.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td .cell-wrapper {
  padding: 0 16px;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-empty .@{ant-prefix}-table-tbody tr > td) {
  padding: 0;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td .@{ant-prefix}-btn {
  padding: 0 30px 0 0;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table-tbody) tr > td .@{ant-prefix}-btn:last-child {
  padding: 0;
}
.vid_a7g6eyj5wh :deep(.table-striped-odd) td {
  background-color: #FFFFFF;
}
.vid_a7g6eyj5wh :deep(.table-striped-even) td {
  background-color: #FAFAFA;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-tbody tr > td {
  border-right:1px solid #EBEBEB;
}
.vid_a7g6eyj5wh :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container .@{ant-prefix}-table-tbody tr > td:first-child {
  border-left:1px solid #EBEBEB;
}
.vid_a7g6eyj5wh{
  width: 100%;
  height:100%
}


.table-text {
  min-width:70px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.aa-text {
  min-width:70px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

.table-text.red {
  color: #F5222D;
}
.aa-text.red {
  color: #F5222D;
}
</style>
